<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        @keyframes liangliangzi {
            0% {
                offset-distance: 0%;
            }

            100% {
                offset-distance: 100%;
            }
        }

        body {
            overflow: hidden;
        }

        .map {
            width: 1920px;
            height: 1080px;
            background: url(./img/Map.png) black no-repeat 145px 0px;
            position: relative;
        }

        .fly {
            overflow: hidden;
            position: absolute;
            left: 0px;
            top: 0px;
            offset-path: path("M1389,648s-103.9-236.91-355-103");
            offset-distance: 0;
            animation: liangliangzi 1.5s linear infinite;
            transform: rotateY(180deg);
        }
        .fly2 {
			overflow: hidden;
			position: absolute;
			left: 0px;
			top: 0px;
			offset-path: path("M1391,649s150.38-164.338,269,19");
			offset-distance: 0;
			animation: liangliangzi 1.5s linear infinite;
			transform: rotateY(180deg);
		}
    </style>
</head>

<body>
    <div class="map">
        <img src="./img/dian.png" alt="" class="fly" width="30px">
        <img src="./img/dian.png" width="20px" class="fly2" />
    </div>
</body>
</html>